<template>
	<div>
		<div class="base-bar">
			<info-bar :menu_title="menu_title" :submenu_title="submenu_title"></info-bar>
		</div>
		<div class="oe-base-info" v-loading="loading">
			<div>
				<div class="oe-head-img" @click.stop="showModal">
					<img :src="avatarUrl || headimg" alt />
					<a-button class="oe-update-btn">更换头像</a-button>
				</div>
			</div>
			<div class="oe-data-from">
				<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
					<a-form-model-item label="用户名" prop="UserName" ref="UserName">
						<a-input v-model="form.UserName" disabled />
					</a-form-model-item>
					<a-form-model-item label="姓名" prop="DisplayName" ref="DisplayName">
						<a-input v-model="form.DisplayName" disabled />
					</a-form-model-item>
					<a-form-model-item label="手机号" ref="phone">
						<a-input v-model="form.Mobile" placeholder="请输入手机号" disabled @change="changeMobile"></a-input>
					</a-form-model-item>
					<a-form-model-item label="邮箱" ref="Email" prop="Email">
						<a-input v-model="form.Email" placeholder="请输入邮箱" />
					</a-form-model-item>

					<a-form-model-item label="验证码" ref="phone" v-show="isChange">
						<a-input v-model="form.Code" class="mobileCode" placeholder="手机验证码"></a-input>
						<a-input v-model="verifycode" class="mobileCode" placeholder="图文验证码"></a-input>
						<img style="width: 100px; height: 32px; cursor: pointer; margin: -8px 5px 0px 5px" id="verImg" :src="verImg" alt="验证码" title="看不清？点击更换" @click="getImg" />
						<a-button type="primary" @click="getCode" v-show="time == 60">获取手机验证码</a-button>
						<a-button class="timeTips" v-show="time != 60">{{ title }}</a-button>
					</a-form-model-item>
					<a-form-model-item label="性别" ref="Sex">
						<a-select v-model="form.Sex" placeholder="请选择性别">
							<a-select-option value="男">男</a-select-option>
							<a-select-option value="女">女</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="地址" ref="Address">
						<a-input v-model="form.Address" placeholder="请输入地址" />
					</a-form-model-item>
					<a-form-model-item label="个人简介" ref="Remark" placeholder="请个人简介">
						<a-input v-model="form.Remark" type="textarea" />
					</a-form-model-item>
					<a-form-model-item :wrapper-col="{ span: 18, offset: 3 }">
						<a-button type="primary" @click="onSubmit">保存</a-button>
						<a-button type="primary" style="margin-left: 10px" @click="onModify(1)">修改密码</a-button>
						<a-button type="primary" style="margin-left: 10px" @click="onModify(2)">修改手机号</a-button>
					</a-form-model-item>
				</a-form-model>
			</div>
			<!-- 头像修改弹窗 -->
			<a-modal title="头像预览" v-model="visible" @ok="handleOk" @cancel="handleCancels" okText="保存" width="800px" wrapClassName="set-head-img">
				<template slot="footer">
					<a-button key="submit" type="primary" @click="getPreserve">保存</a-button>
					<a-button @click.stop="handleCancels">取消</a-button>
				</template>
				<cropperImg ref="cropperImg" :file_system_url="file_system_url" :headimg="avatarUrl || headimg"></cropperImg>
			</a-modal>
			<!-- <a-modal title="修改密码" class="oe-student" :visible="fenpeiModel" width="30%" :closable="false">
				<div class="oe-select">
					<span class="oe-manage-select">
						<h3>修改密码：</h3>
						<div>1、您的密码为初始密码，请及时修改</div>
						<div>2、定期修改密码能更好的保护自己的账号安全</div>
					</span>
				</div>
				<template slot="footer">
					<a-button type="primary" @click="saveStuSet" :loading="uploading" style="margin-top: 16px">前往修改</a-button>
					<a-button @click.stop="fenpeiModel = false" :loading="uploading">取消</a-button>
				</template>
			</a-modal> -->
			<!-- 修改密码 -->
			<a-modal class="modify-dialog" v-model="modifyPwdVisible" centered :maskClosable="false" :footer="null" width="800px" @cancel="$refs.modifyForm.resetFields();$refs.modifyForm.clearValidate()">
				<template slot="title">
					<div class="title">修改密码</div>
				</template>
				<a-form-model ref="modifyForm" :model="modifyForm" :rules="modifyRules" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
					<a-form-model-item ref="oldPwd" label="旧密码" prop="oldPwd">
						<a-input v-model="modifyForm.oldPwd" placeholder="请填写旧密码" size="large" class="custom-ipt-style" />
					</a-form-model-item>
					<a-form-model-item ref="newPwd" label="新密码" prop="newPwd">
						<a-input v-model="modifyForm.newPwd" placeholder="请填写新密码" size="large" class="custom-ipt-style" />
					</a-form-model-item>
					<a-form-model-item ref="rePwd" label="确认密码" prop="rePwd">
						<a-input v-model="modifyForm.rePwd" placeholder="请填写确认密码" size="large" class="custom-ipt-style" />
					</a-form-model-item>

					<a-form-model-item :wrapper-col="{ offset: 3, span: 16 }">
						<div class="modify-form-footer">
							<div class="modify-btn" @click="modifyPwd">修改密码</div>
							<div class="clear-btn" @click="clearPwd">清空</div>
						</div>
					</a-form-model-item>
				</a-form-model>
			</a-modal>
			<!-- 修改手机号 -->
			<a-modal class="modify-dialog" v-model="modifyPhoneVisible" centered :maskClosable="false" :footer="null" width="800px" @cancel="$refs.modifyPhoneForm.resetFields();$refs.modifyPhoneForm.clearValidate()">
				<template slot="title">
					<div class="title">修改手机号</div>
				</template>
				<a-form-model ref="modifyPhoneForm" :model="modifyPhoneForm" :rules="modifyPhoneRules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
					<a-form-model-item ref="oldPhone" label="原手机号:" prop="oldPhone">
						<a-input v-model="modifyPhoneForm.oldPhone" placeholder="请填写原手机号:" size="large" class="custom-ipt-style" />
					</a-form-model-item>
					<a-form-model-item ref="code" label="原手机号验证码:" prop="code">
						<a-input v-model="modifyPhoneForm.code" placeholder="请填写原手机号验证码:" size="large" class="custom-ipt-style" />
						<span class="send-code" @click="sendCode">发送验证码</span>
					</a-form-model-item>
					<a-form-model-item :wrapper-col="{ offset: 8, span: 16 }">
						<div class="modify-form-footer">
							<div class="modify-btn" @click="nextStep">下一步</div>
							<div class="clear-btn" @click="handleCancel">取消</div>
						</div>
					</a-form-model-item>

					<div class="tips">注：若当前手机号不再使用，请联系运营人员进行修改！</div>
				</a-form-model>
			</a-modal>
		</div>
	</div>
</template>
<script>
import cropperImg from '@/components/cropperImg/cropperImg.vue';
import infoBar from '../components/info-bar.vue';
export default {
	components: {
		cropperImg,
		infoBar,
	},
	data() {
		return {
			headimg: 'https://iconfont.alicdn.com/t/1566197395754.jpg@100h_100w.jpg',
			avatarUrl: '',
			headers: {
				authorization: 'authorization-text',
			},
			isChange: false,
			fenpeiModel: false,
			verifycode: '',
			fileList: [],
			labelCol: { span: 4 },
			wrapperCol: { span: 18 },
			oldMobile: '',
			other: '',
			form: {
				UserName: '',
				DisplayName: '',
				Email: '',
				userNationalitySMS: '86',
				Mobile: '',
				Address: '',
				Remark: '',
				Code: '',
				Sex: undefined,
			},
			time: 60,
			title: '获取验证码',
			examTimer: '',
			// 数据加载
			loading: false,
			smsShow: false,
			count: '点击获取',
			verImg: '/api/common/accounts/getVerifyCode',
			rules: {
				DisplayName: [{ required: true, trigger: 'blur' }],
				UserName: [{ required: true, trigger: 'blur' }],
				Email: [
					{ required: true, message: '请输入邮箱', trigger: 'blur' },
					{ validator: this.sendEmail, message: '请输入正确邮箱', trigger: 'blur' },
				],
			},
			visible: false,
			file_system_url: '',
			value: '',
			country: 'cn',
			menu_title: '个人信息',
			submenu_title: '基本信息',
			modifyPwdVisible: false,
			modifyPhoneVisible: false,
			modifyForm: {
				oldPwd: '',
				newPwd: '',
				rePwd: '',
			},
			modifyPhoneForm: {
				oldPhone: '',
				code: '',
			},
			modifyRules: {
				oldPwd: [{ required: true, message: '请填写旧密码', trigger: 'blur' }],
				newPwd: [{ required: true, message: '请填写新密码!', trigger: 'blur' }],
				rePwd: [{ required: true, message: '请填写确认密码!', trigger: 'blur' }],
			},
			modifyPhoneRules: {
				oldPhone: [
					{ required: true, message: '请填写原手机号!', trigger: 'blur' },
					{ validator: this.validMobile, message: '请输入正确手机号', trigger: 'blur' },
				],
				code: [
					{ required: true, message: '请填写原手机号验证码!', trigger: 'blur' },
					{ validator: this.validCode, message: '请输入正确验证码', trigger: 'blur' },
				],
			},
		};
	},
	mounted() {
		this.getManagerInfo();
	},
	methods: {
		handleChange(info) {
			if (info.file.status === 'done') {
				this.$message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === 'error') {
				this.$message.error(`${info.file.name} file upload failed.`);
			}
		},
		sendEmail: function () {
			var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			return regEmail.test(this.form.Email);
		},

		getMobile() {
			let reg = /^1[0-9]{10}$/;
			return reg.test(this.form.Mobile);
		},
		validMobile() {
			let reg = /^1[0-9]{10}$/;
			return reg.test(this.modifyPhoneForm.oldPhone);
		},
		validCode() {
			let reg = /^[0-9]{6}$/;
			return reg.test(this.modifyPhoneForm.code);
		},
		showModal() {
			this.visible = true;
		},
		handleOk(e) {
			this.visible = false;
		},
		onSubmit() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					this.saveMyInfo();
				} else {
					return false;
				}
			});
		},
		changeMobile() {
			this.isChange = this.form.Mobile != this.oldMobile;
			if (this.form.Mobile.length == 11) {
				this.getImg();
			}
		},
		getCode() {
			if (this.time != 60) {
				this.$message.error('请稍后获取验证码');
				return;
			}
			if (this.verifycode == '') {
				this.$message.error('请输入图文验证码');
				return;
			}
			this.$http
				.post('/api/common/accounts/sendSmsCode', {
					verifycode: this.verifycode, //验证码
					mobile: this.form.Mobile, //手机号
				})
				.then((res) => {
					this.getImg();
					if (res.code > 0) {
						this.$message.success(res.msg);
						this.startExam();
					} else {
						this.$message.error(res.msg);
					}
				});
		},
		saveMyInfo() {
			this.$http
				.post('/api/common/accounts/saveMyInfo', {
					email: this.form.Email, //邮箱
					mobile: this.form.Mobile, //手机号
					address: this.form.Address, //地址
					remark: this.form.Remark, //备注
					code: this.form.Code,
					Sex: this.form.Sex,
					// smsCode: this.form.Email, //验证码
					// nationalityCode: this.form.Email, //国际号
				})
				.then((res) => {
					if (res.code > 0) {
						this.$message.success(res.msg);
						this.getManagerInfo();
					} else {
						this.$message.error(res.msg);
					}
				});
		},
		startExam() {
			this.examTimer = setInterval(() => {
				this.time = this.time - 1;
				this.title = this.time + '秒后重新发送';
				if (this.time <= 0) {
					this.time = 60;
					this.title = '60秒后重新发送';
					clearInterval(this.examTimer);
					this.examTimer = '';
					return;
				}
			}, 1000);
		},
		getPreserve() {
			this.$refs.cropperImg.getImg();
		},
		handleCancels(e) {
			this.visible = false;
		},
		getImg() {
			var e = document.getElementById('verImg');
			e.src = this.verImg + '?t=' + Math.random();
		},
		saveStuSet() {
			this.fenpeiModel = false;
			window.open('https://www.icve.com.cn/portal/updatePassword.html?dataSource=9', '_blank');
		},
		sendCode() {},
		nextStep() {
			this.$refs.modifyPhoneForm.validate((valid) => {
				if (valid) {
					console.log(this.modifyPhoneForm);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		handleCancel() {
			this.$refs.modifyPhoneForm.resetFields();
			this.$refs.modifyPhoneForm.clearValidate();
			this.modifyPhoneVisible = false;
		},
		closeModal() {
			this.$refs.modifyForm.resetFields();
			this.$refs.modifyForm.clearValidate();
		},
		clearPwd() {
			this.$refs.modifyForm.resetFields();
		},
		modifyPwd() {
			this.$refs.modifyForm.validate((valid) => {
				if (valid) {
					console.log(this.modifyForm);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		onModify(type) {
			if (type == 1) {
				window.open('https://www.icve.com.cn/portal/updatePassword.html?dataSource=9', '_blank');
				// 修改密码
				// this.modifyPwdVisible = true;
			} else if (type == 2) {
				window.open('https://www.icve.com.cn/portal/updateMobile.html?dataSource=9', '_blank');
				// 修改手机号
				// this.modifyPhoneVisible = true;
			}
		},
		getManagerInfo() {
			this.loading = true;
			this.$http.post('/api/common/accounts/getManagerInfo').then((res) => {
				this.loading = false;
				if (res.code > 0) {
					this.form.UserName = res.user.UserName;
					this.form.DisplayName = res.user.DisplayName;
					this.form.Email = res.user.Email;
					this.form.userNationalitySMS = res.userNationalitySMS;
					this.form.Mobile = res.user.Mobile;
					this.form.Address = res.user.Address;
					this.form.Sex = res.user.Sex;
					this.form.Remark = res.user.Remark;
					this.form.Code = '';
					this.file_system_url = res.file_system_url;
					this.oldMobile = res.user.Mobile;
					var rx = /^https?:\/\//i;
					if (rx.test(res.avatarUrl)) {
						this.avatarUrl = res.avatarUrl;
					} else {
						this.avatarUrl = 'https://cdn-zjy.icve.com.cn' + res.avatarUrl;
					}
					if (res.isUpdatePwd) {
						this.fenpeiModel = true;
					}
				} else {
					this.$message.error(res.msg);
				}
			});
		},
	},
};
</script>

